<template>
  <a-row class="handwritten-container" :gutter="16">
    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="preview-area">
        <div class="image-wrapper">
          <img v-if="modelValue" :src="modelValue" alt="签名预览" class="preview-image">
          <div v-else class="image-placeholder">
            <span>签名预览区域</span>
          </div>
        </div>
      </div>
    </a-col>

    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="operation-area">
        <div class="signature-wrapper">
          <vue-signature-pad
            ref="signaturePad"
            :options="options"
            style="border: 1px solid #d9d9d9; border-radius: 4px;"
            width="100%"
            height="200px"
          />
        </div>

        <div class="control-panel">
          <a-space>
            <a-button type="danger" ghost @click="undo">撤销</a-button>
            <a-button type="danger" ghost @click="clear">清屏</a-button>
            <a-button type="primary" @click="handleSave">保存签名</a-button>
          </a-space>

          <div class="brush-settings">
            <span class="label">笔触粗细：</span>
            <a-radio-group v-model="currentBrushSize" button-style="solid">
              <a-radio-button :value="1">细</a-radio-button>
              <a-radio-button :value="2">中</a-radio-button>
              <a-radio-button :value="3">粗</a-radio-button>
            </a-radio-group>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'SignaturePad',

  props: {
    // 支持 v-model 绑定
    modelValue: {
      type: String,
      default: ''
    }
  },
  model: { // Vue 2.x 必需
    prop: 'modelValue',
    event: 'update:modelValue'
  },
  emits: ['update:modelValue', 'save'],

  data() {
    return {
      options: {
        penColor: "#000",
        minWidth: 1,
        maxWidth: 1,
      },
      currentBrushSize: 1,
    }
  },

  watch: {
    currentBrushSize(newVal) {
      this.options = {
        ...this.options,
        minWidth: newVal,
        maxWidth: newVal
      }
      console.log(this.options)
    },
    modelValue(newVal) {
      console.log('modelValue变化：', newVal)
      if(newVal) {
        this.$nextTick(() => {
          const img = this.$el.querySelector('.preview-image')
          console.log('图片元素：', img)
          if(img) {
            console.log('图片实际尺寸：', img.naturalWidth, img.naturalHeight)
          }
        })
      }
    }

  },

  methods: {
    // 暴露给父组件的方法
    undo() {
      this.$refs.signaturePad?.undoSignature()
    },

    clear() {
      this.$refs.signaturePad?.clearSignature()
      this.$emit('update:modelValue', '')
    },

    handleSave() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      console.log('生成的签名数据：', data)
      if (!isEmpty) {
        this.$emit('update:modelValue', data)
        this.$emit('save', data)
        this.$message.success('签名保存成功')
      } else {
        this.$message.warning('请先进行签名')
      }
    },

    // 获取当前签名数据
    getSignatureData() {
      return this.$refs.signaturePad?.saveSignature() || { isEmpty: true, data: '' }
    }
  }
}
</script>

<style scoped>
.handwritten-container {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.preview-area {
  margin-bottom: 16px;
}

.image-wrapper {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 8px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.image-placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.preview-image {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.operation-area {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.control-panel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brush-settings {
  display: flex;
  align-items: center;
  gap: 12px;
}

.label {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .handwritten-container {
    flex-direction: column;
  }

  .preview-area {
    margin-bottom: 24px;
  }

  .control-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>